<template>
	<view class="content1">
		<view class="MainBox" style="padding-top: 20px;">

			<!-- <view style="margin: 10px 0;">
				<text style="font-size: 26px;font-weight: 600;color: #fff;">我的</text>
			</view> -->


			<u-cell-group class="UserInfoCell" :border="false">
				<u-cell :border="false" @click="ToOther">
					<view slot="title" class="u-slot-title">
						<view class="UserInfoBox x-f">
							<!-- <u-avatar :src="UserInfo.HeadshotImg" bgColor="#e2e2e2" default-url="/static/image/Img/default.png" size="100%" shape="square" uploadIcon="camera-fill" :multiple="false"
							 -->
							<view
								style="background: rgba(255, 255, 255, 0.2);backdrop-filter: blur(10px); box-shadow: 0 4px 8px rgba(255, 255, 255, 0.1);overflow:hidden;border-radius: 12px;">
								<u-avatar src="@/static/image/Img/default.png" bgColor="#e2e2e2"
									default-url="/static/image/Img/default.png" size="100%" uploadIcon="camera-fill"
									:multiple="false" style="width: 100px;height: 100px;border-radius: 24px !important;"
									:maxCount="1"></u-avatar>
							</view>

							<view class="f-dc"
								style="margin-left: 16rpx;font-size: 18rpx;font-weight: 600;color: #fff;">

								<text style="font-size: 24px;">{{curAccountName}}</text>
								<view class="x-f" style="margin-top: 10px;">
									<!-- <text style="font-size: 18px;">{{UserInfo.UserCode}}</text> -->
									<u-tag :text="UserInfo.UserCode" style="margin-right: 6px;" size="mini"
										type="warning"></u-tag>
									<u-tag :text="UserInfo.UserName" size="mini" type="warning"></u-tag>
								</view>
								<!-- <view class="x-f" style="margin-top: 10px;">
									<u-tag :text="'当前版本：'+version" bgColor="#f6dcc7" borderColor="#f6dcc7" size="mini"
										color="#63544e"></u-tag>
								</view> -->
								<view style="font-size: 12px;margin-top: 10px;color: #63544e;">
									<text>当前版本：{{version}}</text>
								</view>

								<!-- <text style="margin-top: 10px;">{{UserInfo.Duties}}</text> -->
							</view>
						</view>
					</view>

					<!-- <view slot="value">
						<u-icon name="arrow-right" color="#fff" size="28"></u-icon>
					</view> -->
				</u-cell>
			</u-cell-group>


			<view class="MainCellBox f-dc">

				<uni-row class="CommonBox" style="border-radius: 10rpx 10rpx 0 0;overflow: hidden;font-size: 24rpx;"
					:gutter="20">

					<uni-col :span="8" :xm="{span: 12}" :xs="{span: 8}" :sm="{span: 4}" :lg="{span: 3}">
						<view class="CommonCard f-dc" style="padding: 20rpx 10rpx;color: #999;" @click="GetUpdate">
							<view class="x-c">
								<uni-icons fontFamily="CustomFontPlatform" color="#fce320" size="40rpx"
									style="margin-right:6rpx;">{{$utils.toUniCode('&#xe616;')}}</uni-icons>

								<text>检测更新</text>

							</view>
							<view class="x-c" style="margin-top: 20rpx;"
								:style="{fontSize: newVersion != '暂无更新' ? '20rpx' : '24rpx'}">
								<text>{{newVersion}}</text>
							</view>
						</view>
					</uni-col>

					<uni-col :span="8" :xm="{span: 12}" :xs="{span: 8}" :sm="{span: 4}" :lg="{span: 3}">
						<view class="CommonCard f-dc" style="padding: 20rpx 10rpx;color: #999;"
							@click="ToOther({ID:0})">
							<view class="x-c">
								<uni-icons fontFamily="CustomFontPlatform" color="#16d92d" size="40rpx"
									style="margin-right:6rpx;">{{$utils.toUniCode('&#xe602;')}}</uni-icons>

								<text>授权</text>

							</view>
							<view class="x-c" style="margin-top: 20rpx;">
								<text :style="{color: IsTrue ? '#51d0d0' : '#999'}"
									style="margin-right: 6px;color: #51d0d0;">{{IsTrue ? '已授权' : '未授权'}}</text>
							</view>
						</view>
					</uni-col>

					<uni-col :span="8" :xm="{span: 12}" :xs="{span: 8}" :sm="{span: 4}" :lg="{span: 3}">
						<view class="CommonCard f-dc" style="padding: 20rpx 10rpx;color: #999;">
							<view class="x-c">
								<uni-icons fontFamily="CustomFontPlatform" color="#51d0d0" size="40rpx"
									style="margin-right:6rpx;">{{$utils.toUniCode('&#xe613;')}}</uni-icons>

								<text>SignalR</text>

							</view>
							<view class="x-c" style="margin-top: 20rpx;">
								<text
									:style="{color: SignalR_Status? '#51d0d0' : '#999'}">{{SignalR_Status ? '已连接':'未连接'}}</text>
							</view>
						</view>
					</uni-col>



					<uni-col v-for="item in CellBox" :span="8" :xm="{span: 12}" :xs="{span: 8}" :sm="{span: 4}"
						:lg="{span: 3}">
						<view class="CommonCard f-dc" style="padding: 20rpx 10rpx;color: #999;" @click="ToOther(item)">

							<uni-icons :type="item.Icon" size="40rpx" :color="item.IconColor"></uni-icons>

							<view class="x-c" style="margin-top: 20rpx;font-size: 24rpx;">
								<text>{{item.Text}}</text>
							</view>

						</view>
					</uni-col>

					<uni-col :span="8" :xm="{span: 12}" :xs="{span: 8}" :sm="{span: 4}" :lg="{span: 3}">
						<view class="CommonCard f-dc" style="padding: 20rpx 10rpx;color: #999;" @click="LoginOut">
							<view class="x-c">
								<uni-icons fontFamily="CustomFontPlatform" color="#ff694f"
									size="40rpx">{{$utils.toUniCode('&#xe614;')}}</uni-icons>

							</view>
							<view class="x-c" style="margin-top: 20rpx;font-size: 24rpx;">
								<text>退出登录</text>
							</view>
						</view>
					</uni-col>
				</uni-row>



				<!-- <u-cell-group class="CellBox"
					style="margin-top: 10rpx;background-color: #fff;flex: 1;overflow: auto;border-radius: 10rpx;"
					:border="false">


					<u-cell :border="false" size="large" :title="item.Text" :titleStyle="{color:'#999',fontSize:'12px'}"
						v-for="(item,index) in CellBox" :key="index" @click="ToOther(item)" clickable>
						<view slot="icon">

							<uni-icons :type="item.Icon" size="24" :color="item.IconColor"
								style="margin-right:6px;"></uni-icons>
						</view>
						<view slot="value" class="x-f" style="justify-content: flex-end;">
							<u-icon name="arrow-right" color="#999" size="16"></u-icon>
						</view>
					</u-cell>

					<u-cell :border="false" size="large" title="退出登录" :titleStyle="{color:'#999',fontSize:'12px'}"
						@click="LoginOut">
						<view slot="icon">
							<uni-icons fontFamily="CustomFontPlatform" color="#ff694f" :size="24"
								style="margin-right:6px;">{{$utils.toUniCode('&#xe614;')}}</uni-icons>
						</view>
					</u-cell>
				</u-cell-group> -->
			</view>
		</view>

		<u-modal style="z-index: 999999999;" customClass="ModalPopupBox" :duration="100" contentPadStyle="40rpx 40rpx"
			:show="showLoginOut" :showConfirmButton="false" :zoom="false" width="500rpx" title="退出登录"
			content='是否要退出当前登录？'>
			<template slot="confirmButton">
				<view class="x-f" style="justify-content: space-between;">
					<u-button shape="circle"
						style="width: 44%;background-color: #f0f0f0;color: #4d4d4d;font-weight: 600;border-radius: 8px;"
						text="取消" @click="CloseLoginOut" plain></u-button>
					<u-button shape="circle"
						style="width: 44%;background-color: #51d0d0;color: #fff;font-weight: 600;border-radius: 8px;"
						text="确定" @click="SubmitLoginOut"></u-button>
				</view>
			</template>
		</u-modal>
	</view>
</template>

<script>
	// #ifdef APP-PLUS
	import MAPPUpdate from '@/uni_modules/mc-ui/components/m-app-update/js_sdk/appUpdate.js';
	// #endif
	export default {
		data() {
			return {
				version: '正在获取...', // 本机版本号
				newVersion: '正在获取...', // 检测更新版本
				curAccountName: '',
				// currentID: null, // 底部栏选中项值
				UserInfo: {
					HeadshotImg: '',
					UserAccount: '', // 账号
					UserName: '', // 职务
					UserCode: '', // 用户名
					Tel: '', // 联系方式
				},
				CellBox: [ // cell功能模块组
					{
						Text: '关于',
						Icon: 'info',
						IconColor: '#e6da2b',
						ID: 1
					},
					{
						Text: '设置',
						Icon: 'gear',
						IconColor: '#b6b6b6',
						ID: 2
					},
					// {
					// 	Text: '帮助教程',
					// 	Icon: 'help',
					// 	IconColor: '#ff9d00',
					// 	ID: 3
					// },
				],
				IsTrue: false, // 是否授权

				showLoginOut: false, // 是否展示注销登录窗口
			}
		},
		onLoad(option) {
			// console.log(option.TabbarID)
			// this.currentID = +option.TabbarID;

		},
		onShow() {
			var that = this;
			// 赋值授权信息
			if (!this.$utils.isEmpty(this.$store.state.appConfigInfo.Authorization_Info)) {
				let data = this.$store.state.appConfigInfo.Authorization_Info;
				that.IsTrue = data.Authorization
			}
			setTimeout(() => {
				that.UserInfo = that.$store.state.UserInfo;
			}, 50);
		},
		created() {
			var that = this;
			// 赋值授权信息
			if (!this.$utils.isEmpty(this.$store.state.appConfigInfo.Authorization_Info)) {
				let data = this.$store.state.appConfigInfo.Authorization_Info;
				that.IsTrue = data.Authorization
			};
			that.getAccountNameByID();

			// 获取服务端版本号
			this.getServerVersion();


			setTimeout(() => {
				that.UserInfo = that.$store.state.UserInfo;
			}, 50);
		},
		computed: {
			SignalR_Status() {
				return this.$store.state.IPModel.SignalR_Status
			}
		},
		methods: {
			onMyShow() {
				// 获取服务端版本号
				// this.getServerVersion();

			},
			versionFn(NewV, OldV) {
				var curV = NewV,
					reqV = OldV,
					curArr = curV.split('.'),
					reqArr = reqV.split('.'),
					maxL = Math.max(curArr.length, reqArr.length),
					index = 0,
					diff = 0;
				if (reqArr.length != maxL) {
					reqArr.push("0");
				}

				while (index < maxL) {
					diff = parseInt(curArr[index]) > parseInt(reqArr[index]) ? 1 : (parseInt(curArr[index]) ==
						parseInt(
							reqArr[index]) ? 0 : -1);
					if (diff != 0) {
						break;
					}
					index++;
				}

				if (diff > 0) {
					return 2
				} else if (diff == 0) {
					return 1
				} else {
					return 0
				}
			},
			convertVersion(versionStr) {
				// 将版本号按 "." 分割成三个部分
				const parts = versionStr.split('.');

				// 解析每个部分为整数
				const major = parseInt(parts[0], 10); // 主版本号
				const minor = parseInt(parts[1], 10); // 次版本号
				const patch = parseInt(parts[2], 10); // 修订号

				// 计算最终数值：主版本*10000 + 次版本*100 + 修订号
				return major * 10000 + minor * 100 + patch;
			},
			getServerVersion() { // 获取本机版本号
				let that = this;
				that.version = "正在获取...";
				that.newVersion = "正在获取...";


				this.Request.request('getAppFileList', {
					name: 'H6Cloud'
				}, function(res) {
					let sysDeviceInfo = that.$store.state.systemConfig.sysDeviceInfo;
					if (res.status == 200) {
						let data = res.data.ds[0];
						let Local_Ver = sysDeviceInfo.appVersion;
						// 比较版本号 返回值： 0 高于服务器版本； 1 与服务器版本一致； 2 低于服务器版本；
						let contrast = that.versionFn(data.F_Ver, Local_Ver);
						that.version = Local_Ver + '_' + that.convertVersion(sysDeviceInfo.appWgtVersion);

						switch (contrast) {
							case 2: // 大版本更新
								that.newVersion = '新版本：' + data.F_Ver;
								break;
							case 1: // 检测小版本更新

								plus.runtime.getProperty(plus.runtime.appid, function(inf) {
									// 判断是否存在新版本
									if (+data.F_VCode > +inf.versionCode && !that.$utils.isEmpty(data
											.F_VCode) && !that.$utils.isEmpty(data.Wgt_Url)) {

										that.newVersion = '新版本：' + data.F_VCode;
									} else {
										that.newVersion = "暂无更新";
									}

								});


								break;
							default: // 无更新
								that.newVersion = "暂无更新";
								break;
						}
					} else {
						that.version = plus.runtime.version;
					}
				})
			},
			GetUpdate() { // 检查更新
				var that = this;
				this.$utils.showLoading('正在检查更新')
				this.getServerVersion();

				const platform = uni.getSystemInfoSync().platform;
				// UpdateSwitch
				// #ifdef APP-PLUS
				if (platform == "android") {

					// 改变值，开启检索 无更新提示
					that.$store.commit('ChangeAndSetStateData', {
						Name1: 'systemConfig.UpdateSwitch',
						data: true,
					});
					MAPPUpdate(false, () => {
						that.$utils.hideLoading();
					});
				} else {
					that.$utils.hideLoading();
					// IOS直接跳转到APPStore
					plus.runtime.openURL(
						'https://apps.apple.com/cn/app/汇创云平台/id6737088415');
				}


				// #endif
			},
			getAccountNameByID() { // 根据账套ID获取账套名称
				let that = this;
				try {
					that.Request.request('getAccountNameByID', {
						AccountID: that.$store.state.UserInfo.Business
					}, function(ret) {
						if (ret.status == 200) {
							that.curAccountName = ret.data.ds[0].AccountName;
						}
					}, function(err) {
						console.log(err);
					});

				} catch (error) {
					console.log(error);
				}
			},
			ToOther(data) {
				let url = ''

				if (data.ID == 0) {
					url = '/pages/mine/OnlyIdentity'
				} else if (data.ID == 1) {
					url = '/pages/mine/MineAbout'
				} else if (data.ID == 2) {
					url = '/pages/mine/SettingPage'
				}

				if (url) {
					uni.navigateTo({
						url: url,
						fail(error) {
							console.log(error)
						}
					})
				}
			},
			LoginOut() {
				this.showLoginOut = true;
			},
			SubmitLoginOut() {
				// 清除一些需要重置的缓存
				
				this.$store.commit('ChangeAndSetStateData', {
					Name1: 'systemConfig.isLogin',
					data: false,
				});

				// 清除自动登录
				uni.removeStorageSync('Automatic_Login')
				uni.reLaunch({
					url: '/pages/login/login',
				});
			},
			CloseLoginOut() {
				this.showLoginOut = false;
			},
		}
	}
</script>

<style lang="scss" scoped>
	* {
		padding: 0;
		margin: 0;
		box-sizing: border-box;
	}

	.u-popup {
		flex: initial !important;

	}

	.ModalPopupBox {

		.u-popup__content {
			border-radius: 30rpx !important;
		}
	}

	.content1 {
		/* 给顶部盒子安全高度 */
		padding: var(--status-bar-height) 0 0;
		// height: 100vh;
		background-image: linear-gradient(to bottom, #51d0d0, rgba(81, 208, 208, .6), #f8f8f8, #f8f8f8);
		display: flex;
		flex-direction: column;
		height: 100%;

		.MainBox {
			flex: 1;
			padding: 0 15px;
			display: flex;
			flex-direction: column;
		}


		// 用户信息
		.UserInfoCell {
			padding: 40rpx 0;

			// 用户信息右侧箭头样式
			.uicon-arrow-right {
				color: #fff !important;
				font-size: 24px !important;
			}
		}

		.u-cell-group {
			flex: none !important;

			.u-line {
				border: none;
			}
		}

		// cell功能模块组
		.MainCellBox {
			border-radius: 20px 20px 0 0;
			overflow-y: auto;
			background-color: #f8f8f8;
			flex: 1;
			padding: 10px;
			// height: 100%;

			.CommonCard {
				min-height: 130rpx;
				background-color: #fff;
				border-radius: 12px;
				display: flex;
				flex-direction: column;
				justify-content: center;
				padding: 15rpx 0;
				margin-bottom: 20rpx;
				box-shadow: 1px 1px 7px -6px #bababa;
				position: relative;

				&:active {
					transform: scale(0.98);
					box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
				}

				&::after {
					content: '';
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					background: rgba(81, 208, 208, 0.05);
					opacity: 0;
					transition: opacity 0.3s;
				}

				&:active::after {
					opacity: 1;
					border-radius: 12px;
				}
			}

			.u-cell {
				// background-color: #fff !important;
				position: relative;
			}

			// 给cell框下方加一根浅的线
			.u-cell::after {
				position: absolute;
				box-sizing: border-box;
				content: ' ';
				pointer-events: none;
				right: 16px;
				bottom: 0;
				left: 16px;
				border-bottom: 1px solid #ebedf0;
				-webkit-transform: scaleY(0.5);
				transform: scaleY(0.5);
			}

			// 去除最后一个cell的下划线
			& .u-cell:last-child::after {
				border-bottom: none !important;
			}
		}

	}
</style>